<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>充值活动</title>
	<link rel="stylesheet" href="./static/css/style.css">
	<link rel="stylesheet" href="./static/css/swiper.min.css">
	<script src="./static/js/hotcss.js"></script>
</head>
<body>
	<div class="banner-blue"></div>
	<div class="swiper-container">
		<div class="swiper-wrapper">
		  <div class="swiper-slide">
			<a href="#">
				<img class="img" src="./static/img/banner_01.png" alt="">
			</a>
		  </div>
		  <div class="swiper-slide">
			<a href="#">
				<img class="img" src="./static/img/banner_02.png" alt="">
			</a>
		  </div>
		  <div class="swiper-slide">
			<a href="#">
				<img class="img" src="./static/img/banner_03.png" alt="">
			</a>
		  </div>
		</div>
		<div class="swiper-pagination"></div>
	  </div>
	<div class="adv-box">
		<div class="adv-box-item">
			<a href="#">
				<img class="img" src="./static/img/png_huafeijifeng.png" alt="">
			</a>
		</div>
		<div class="adv-box-item">
			<a href="#">
				<img class="img" src="./static/img/png_quzhifu.png" alt="">
			</a>
		</div>
	</div>
	<div class="more-box">
		<div class="more-box-title">
			更多服务
		</div>
		<div class="more-main">
			<div class="more-box-item" data-toast="1">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_huafeijifen.png" alt="">
					</div>
					<div>
						<p class="tl">
							话费积分
						</p>
						<p class="stl">
							兑换现金
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_kecai.png" alt="">
					</div>
					<div>
						<p class="tl">
							科彩彩券
						</p>
						<p class="stl">
							赢大奖  
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_dianfei.png" alt="">
					</div>
					<div>
						<p class="tl">
							电费充值
						</p>
						<p class="stl">
							优惠多多 
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_tehui.png" alt="">
					</div>
					<div>
						<p class="tl">
							特惠加油
						</p>
						<p class="stl">
							享折扣
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_huafeichonzhi.png" alt="">
					</div>
					<div>
						<p class="tl">
							话费充值
						</p>
						<p class="stl">
							充值立减
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_dianying.png" alt="">
					</div>
					<div>
						<p class="tl">
							电影院线
						</p>
						<p class="stl">
							优惠专享
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_yingshi.png" alt="">
					</div>
					<div>
						<p class="tl">
							影视娱乐
						</p>
						<p class="stl">
							畅享会员
						</p>
					</div>
				</a>
			</div>
			<div class="more-box-item">
				<a href="#">
					<div class="more-box-icon">
						<img class="img" src="./static/img/icon_zhekou.png" alt="">
					</div>
					<div>
						<p class="tl">
							折扣券
						</p>
						<p class="stl">
							美团饿了么
						</p>
					</div>
				</a>
			</div>
		</div>
		
	</div>
	<div class="toast-box">
		敬请期待
	</div>	
	<script src="./static/js/jquery-2.1.3.min.js"></script>
	<script src="./static/js/swiper.jquery.min.js"></script>
	<script> 
	   $(function(){
		   var mySwiper = new Swiper ('.swiper-container', {
			loop: true,
			autoplay : true,
			speed : 2500,
			pagination: '.swiper-pagination',			
		   })
		   $('.more-box-item').on('click',function(){
			   var toast = $(this).data('toast')
			   if(toast == 1) {
				   $(".toast-box").show()
				   setTimeout(function(){
					   $(".toast-box").hide()
				   },2000)
			   }
		   })
	   })
	</script>
</body>
</html>